<template>
   <div class="extensionWithdrawal" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="提现"></myHead>
      <div class="tit">可提现金额￥26895.92</div>
      <div class="money">
         <p>金额</p>
         <input type="text" placeholder="请输入提现金额">
      </div>
      <div class="tit">选择提现方式</div>
      <div class="select">
         <div class="sel-item">
            <div class="sel-item-l" @click="isSel = [true,false]">
               <img :src="isSel[0]?'../../../static/img/wc.png':'../../../static/img/tgtx002.png'" alt="">
            </div>
            <div class="sel-item-r" @click="show = true">
               <img src="../../../static/img/zf291.png" alt="">
               <p>提现到&ensp;{{thisCard}}</p>
            </div>
         </div>
         <div class="sel-item" >
            <div class="sel-item-l" @click="isSel = [false,true]">
               <img :src="isSel[1]?'../../../static/img/wc.png':'../../../static/img/tgtx002.png'" alt="">
            </div>
            <div class="sel-item-r">
               <img src="../../../static/img/tgtx001.png" alt="">
               <p>微信提现</p>
            </div>
         </div>
      </div>

      <div class="btn">提交</div>

      <!-- 选择学校 -->
      <van-popup v-model="show" position="bottom">
         <van-picker title="提现到银行卡" show-toolbar :columns="columns.list" @confirm="onConfirm" @cancel="onCancel" @change="onChange"/>
      </van-popup>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
        name: "extensionWithdrawal",
        components:{
            myHead
        },
        data(){
            return {
                isSel:[true,false], // 提现方式选择
                columns: {list:['邮政银行(3219)','农业银行(3219)','建设银行(3219)'],id:[]}, // 学校列表
                show:false,
                thisCard:'邮政银行(3219)', // 当前选择的银行卡
            }
        },
        methods:{
            onConfirm(value, index) {
                this.show = false;
                console.log(`当前值：${value}, 当前索引：${index}`);
            },
            onChange(picker, value, index) {
                console.log(`当前值：${value}, 当前索引：${index}`);
                this.thisCard = this.columns.list[index];
            },
            onCancel() {
                this.show = false;
                console.log('取消');
            },
        }
    }
</script>

<style scoped>
   .extensionWithdrawal {
      padding-top: .5rem;
      background-color: #F6F6F6;
      box-sizing: border-box;
   }
   .tit{
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #BEBEBE;
      height: .45rem;
      line-height: .45rem;
      padding-left: .13rem;
   }
   .money {
      height: .5rem;
      background-color: #FFFFFF;
      padding-left: .13rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .money>p {
      font-size:.16rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #333333;
      margin-right: .2rem;
   }
   .money>input {
      width: 70%;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      border: none;
      outline: none;
   }
   .money>input::placeholder {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(153,153,153,1);
   }
   .sel-item {
      height: .55rem;
      padding: 0 .1rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
   }
   .sel-item-l {
      width: .22rem;
      height: .22rem;
   }
   .sel-item-l>img {
      width: 100%;
      height: 100%;
   }
   .sel-item-r {
      height: 100%;
      width: calc(100% - .4rem);
      display: flex;
      flex-flow: row;
      align-items: center;
      border-bottom: .01rem solid #E6E6E6;
   }
   .sel-item-r>img {
      width: .22rem;
      max-height: .22rem;
      margin-right: .15rem;
   }
   .sel-item-r>p {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #333333;
   }
   .sel-item:nth-last-child(1)>.sel-item-r {
      border: none;
   }
   .btn {
      position: fixed;
      bottom: .3rem;
      width:3.45rem;
      height:.44rem;
      background:linear-gradient(0deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
      border-radius:.22rem;
      left: 0;
      right: 0;
      margin: 0 auto;
      font-size:.18rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FFFFFF;
      text-align: center;
      line-height: .44rem;
   }

   /* 三级联动插件自适应处理 */
   >>> .van-cell {
      color: #999999 !important;
      font-size: .15rem;
      padding: 0;
      line-height: .24rem;
   }

   >>> .van-popup {
      height: 2.7rem !important;
   }

   >>> .van-picker__columns {
      height: 2.2rem !important;
   }

   >>> .van-picker-column__wrapper > li {
      height: .44rem !important;
      line-height: .44rem !important;
   }

   >>> .van-picker-column {
      font-size: .16rem !important;
   }

   >>> .van-picker__toolbar {
      height: .44rem;
      line-height: .44rem;
   }

   >>> .van-picker__cancel {
      font-size: .14rem !important;
      padding: 0 .16rem !important;
   }

   >>> .van-picker__confirm {
      font-size: .14rem !important;
      padding: 0 .16rem !important;
   }

   >>> .van-picker__title {
      font-size: .16rem;
   }
   >>> .van-cell__right-icon {
      margin-left: .05rem;
      height: .24rem;
      font-size: .16rem;
      line-height: .24rem;
   }
</style>